<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短视频去水印小工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <?php include 'includes/navbar.php'; ?>
    <div class="container mt-5">
        <div class="card">
            <h2 class="mb-4 text-center">短视频去水印小工具</h2>
            <form id="removeWatermarkForm">
                <div class="mb-3">
                    <label for="videoUrl" class="form-label">短视频链接</label>
                    <input type="url" class="form-control" id="videoUrl" name="url" required placeholder="请输入短视频链接">
                </div>
                <button type="submit" class="btn btn-primary w-100">去水印</button>
            </form>
            <div id="result" class="mt-3"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
    <script>
        document.getElementById('removeWatermarkForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var videoUrl = document.getElementById('videoUrl').value;

            if (!sessionStorage.getItem('isLoggedIn')) {
                window.location.href = 'login.html';
                return;
            }

            fetch('remove-watermark.php?url=' + encodeURIComponent(videoUrl), {
                method: 'GET'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok.');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    var resultHtml = '<div class="alert alert-success" role="alert">';
                    resultHtml += '<p>标题: ' + data.data.title + '</p>';
                    resultHtml += '<video id="videoPlayer" width="640" height="360" controls autoplay>';
                    resultHtml += '<source src="' + data.data.video_url + '" type="video/mp4"></source>';
                    resultHtml += '</video>';
                    resultHtml += '<button id="copyButton" class="btn btn-secondary btn-sm" onclick="copyVideoUrl()">复制视频链接</button>';
                    resultHtml += '<p>无水印封面: <img src="' + data.data.cover_url + '" alt="封面预览" style="max-width:100%;"></p>';
                    document.getElementById('result').innerHTML = resultHtml;

                    function copyVideoUrl() {
                        navigator.clipboard.writeText(data.data.video_url);
                        alert('视频链接已复制到剪贴板！');
                    }
                    document.getElementById('copyButton').addEventListener('click', copyVideoUrl);
                } else {
                    document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">' + data.message + '</div>';
                }
            })
            .catch(error => {
                document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">请求失败: ' + error.message + '</div>';
            });
        });
    </script>
</body>
</html>